<template>
    <div style="display: flex; flex-direction: row">
        <el-tabs style="flex: 1; ">
            <el-tab-pane label="登录模拟">
                <p style="text-align: center">默认用户名密码 admin/admin，直接刷新本页面即可登出用户</p>
                <el-divider/>
                <el-form style="width: 500px;" label-width="100px">
                    <el-form-item label="用户名">
                        <el-input v-model="username"/>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="password" type="password"/>
                    </el-form-item>
                    <div style="text-align: center">
                        <el-button @click="login" type="primary">登录</el-button>
                    </div>
                </el-form>
            </el-tab-pane>
            <el-tab-pane lazy label="数据管理">
                <db-manage />
            </el-tab-pane>
            <el-tab-pane label="系统设置" lazy>
                <user-manage/>
            </el-tab-pane>
        </el-tabs>
        <div style="width: 800px; margin-left: 20px; display: flex; flex-direction: row">
            <div style="flex: 1; overflow: hidden; margin-right: 20px;">
                <h5>客户端日志</h5>
                <el-divider/>
                <div style="height: 500px; overflow: auto; background: rgba(0,0,0);
    color: #f6c25b; padding: 10px;" ref="clientLog">
                    <div v-for="v in clientLogs" v-text="v" class="log-line"></div>
                </div>
            </div>
            <div style="flex: 1; overflow: hidden;">
                <h5>服务端日志</h5>
                <el-divider/>
                <div style="height: 500px; overflow: auto; background: rgba(0,0,0);
    color: #5ffdf0; padding: 10px;" ref="serverLog">
                    <div v-for="v in serverLogs" v-text="v" class="log-line"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import ws from "./socket/socket"
    import UserManage from "./user-manage";
    import DbManage from "./db-manage";
    export default {
        name: "mock",
        components: {DbManage, UserManage},
        data(){
            return {
                username: "",
                password: "",
                clientLogs: [],
                serverLogs: []
            }
        },
        methods:{
            async login(){
                var r = await ws.send("REQ_LOGIN", {
                    username: this.username,
                    password: this.password
                })
                console.log(r)
                if(r.code == 0){
                    this.$message.success(r.msg)
                } else {
                    this.$message.error(r.msg)
                }
            }
        },
        async mounted() {
            var t = this
            window.$vue.$on("client-log", function(log){
                t.clientLogs.push(log)
                if(t.clientLogs.length > 30){
                    t.clientLogs.splice(0, 1)
                }
                t.$nextTick(_ => {
                    try{
                        t.$refs.clientLog.scrollTop = (t.$refs.clientLog.scrollHeight)
                    } catch (e) {
                    }
                })
                // console.log("received log", arguments)
            })
            $vue.$on("server-log", function (log) {
                t.serverLogs.push(log)
                if(t.serverLogs.length > 30){
                    t.serverLogs.splice(0, 1)
                }
                t.$nextTick(_ => {
                    try{
                        t.$refs.serverLog.scrollTop = (t.$refs.serverLog.scrollHeight)
                    } catch (e) {
                    }
                })
            })
            // var r = await ws.send("GET_USER_LIST")
            // console.log("callback", r)
            // ws
            // ws.on("open", async function () {
            // })
            // ws.on("test", function () {
            //     console.log(123321)
            // })
        }
    }
</script>

<style scoped>
    .log-line{
        font-size: 12px;
        margin-bottom: 5px;
        word-wrap: break-word;
        word-break: normal;
    }
</style>
